<template>
	<h3>原始效果</h3>
	<div class="box text">嵌入式引用样式</div>
	
	<h3>1.将class属性值绑定为字符串</h3>
	<div :class="className1">嵌入式引用样式</div>
	
	<h3>2.将class属性值绑定为对象</h3>
	<div :class="{text:true}">绑定为对象</div>
	<div :class="{bg:isBg}">测试</div>
	<div :class="text">测试2</div>
	
	<h3>3.将class属性值绑定为数组</h3>
	<div :class='[className1,className2]'>数组1</div>
	<!-- <div :class='classList'>数组2</div> -->
</template>

<script setup>
	//演示样式绑定 class属性
	import {ref,reactive,} from 'vue'
	const className1=ref('box')
	const className2=ref('text')
	//2.将class属性值绑定为对象
	//2.1 语法 :class="{style中定义的样式名称:true/false}"
	const isBg=ref(true)
	const text=reactive({text:true})
	
	//绑定为数组
	// const classList=reactive([className1,className2])
</script>

<style scoped>
	.box{
		height: 200px;
		width: 200px;
		border: 2px dotted rosybrown;
		border-radius: 8px;
	}
	.text{
		color: blue;
		font-size: 20px;
	}
	.bg{
		background-color: cadetblue;
	}
</style>